<template>
  <div>
    <el-col :span="2"><el-button class="createButton el-icon-plus" @click="showAdd()">&nbsp;&nbsp;&nbsp;新增</el-button></el-col>    
    <el-dialog title="修改" v-model="dialogFormVisible" :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" class="dialog-form">
        <el-form-item label="名称" prop="name">
          <el-col :span="18"><el-input v-model="form.name" ></el-input></el-col>
        </el-form-item>
        <el-form-item label="类型" prop="roleType">
            <el-radio-group v-model="form.roleType">
              <el-radio label="NORMAL" >普通类型</el-radio>
              <el-radio label="ORGANIZATION" >机构负责人</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-col :span="18">
            <el-input  type="textarea"  v-model="form.description"
                       :autosize="{ minRows: 2, maxRows: 4}"
                       placeholder="请输入内容" >
            </el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel" class="cancelBtn">取 消</el-button>
        <el-button type="primary" @click="submitAdd('form')" class="commonBtn">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {postLog} from 'api/common'

  export default{
      data(){
        let validatePass=(rule,value,callback)=>{
          let regExp=/^[A-Za-z\u4e00-\u9fa5]+$/;
          if(value==''){
            return callback(new Error('请输入角色名称'))
          }
          setTimeout(()=>{
            if(regExp.test(value)==false){
              callback(new Error('亲，只能输入中文及英文'))
            }else{
              callback();
            }
          })
        }
          return{
            form: {
              creator:'',
              name:'',
              roleType:'NORMAL',
              description:''
            },
            dialogFormVisible: false,
            rules:{
              name:[
                {required:true,message:'请输入角色名称',trigger:'blur'},
                {min:0,max:30,message:'不超过30个字',trigger:'blur'},
                {validator:validatePass,trigger:'blur'}
              ],
              description:[
                { required: true, message: '请输入描述', trigger: 'blur' },
                { min: 0, max: 300, message: '不超过三百个字', trigger: 'blur' },
              ]
            },//验证规则
          }
      },
      created(){
        this.form.creator=sessionStorage.getItem('realName');
      },
      methods:{
        submitAdd(form){
          this.$refs[form].validate((valid) => {
            if (valid) {
              this.$http.post('/api-web/v1/api/userRole/create',this.form)
                .then((response)=>{
                  let data=response.body;
                  if(data.resultCode=='200'){
                    this.$emit('update');
                    this.$refs[form].resetFields();
                    this.dialogFormVisible=false;
                    postLog('SYSTEM_ROLE_ADD',null,null,this.form)

                  }
                },(err)=>{
                  this.$alert('出错了','提示')
                })
            }
          });
        },
        cancel(){
          this.dialogFormVisible=false;
          this.form.name='';
          this.form.description=''
        },
        showAdd(){
          this.dialogFormVisible=true
        }
      }
  }
</script>
<style>

</style>
